<template>
  <div class="flex items-center flex-col text-center p-12 h-screen">
    <div class="relative h-full mb-4">
      <video
        ref="localVideo"
        class="w-96 h-full bg-gray-200 mb-4 object-cover"
      ></video>
      <video
        ref="remoteVideo"
        class="w-32 h-48 absolute bottom-0 right-0 object-cover"
      ></video>
      <div
        v-if="caller && calling"
        class="absolute top-2/3 left-36 flex flex-col items-center"
      >
        <p class="mb-4 text-white">等待对方接听...</p>
        <!-- <img
          @ckick="hangUp"
          class="w-16 cursor-pointer mr-4"
          src="/refuse.svg"
          alt=""
        /> -->
      </div>
      <div
        v-if="called && calling"
        class="absolute top-2/3 left-32 flex flex-col items-center"
      >
        <p class="mb-4 text-white">收到视频邀请...</p>
        <div class="flex">
          <!-- <img
            @click="hangUp"
            src="/refuse.svg"
            class="w-16 cursor-pointer mr-4"
            alt=""
          /> -->
          <!-- <img
            @click="acceptCall"
            src="/accept.svg"
            class="w-16 cursor-pointer"
            alt=""
          /> -->
        </div>
      </div>
    </div>
    <div class="flex gap-2 mb-4">
      <button
        class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white"
        @click="callRemote"
      >
        发起视频
      </button>
      <button
        class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white"
        @click="hangup"
      >
        挂断视频
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { io } from "socket.io-client";
const called = ref<boolean>(false); //是否是接收方
const caller = ref<boolean>(false); //是否是发起方
const calling = ref<boolean>(false); //呼叫中
const communicating = ref<boolean>(false); //视频通话中
const localVideo = ref<HTMLVideoElement>(); //video标签实例，播放本人的视频
const remoteVideo = ref<HTMLVideoElement>(); //video标签实例，播放对方的视频

onMounted(() => {
  //页面打开就会执行
  const socket = io("http://localhost:4000");
  socket.on("connection", () => {
    console.log("连接成功");
  });
});
//发起方发起视频请求
const callRemote = () => {
  console.log("发起视频");
  const socket = io("http://localhost:4000");
  socket.on("connection", () => {
    console.log("连接成功");
  });
};

//接收方接受视频请求
const acceptCall = () => {
  console.log("接受视频");
};

//接收方拒绝视频请求
const hangUp = () => {
  console.log("挂断视频");
};
</script>